<template>
    <div class="register">
        <section class="form_container">
            <div class="manage_tip">
                <span class="title">用户注册</span>

                <el-form :model="registerUser" status-icon :rules="rules" ref="registerForm" label-width="80px" class="registerForm">
                    <el-form-item label="用户名" prop="name">
                        <el-input v-model="registerUser.name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="registerUser.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="registerUser.password" autocomplete="off" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="registerUser.checkPass" autocomplete="off" placeholder="请确认密码"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
                        <el-button @click="resetForm('registerForm')">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
        </section>
    </div>
</template>

<script>
export default {
    name:'register',
    components:{},
    data(){
        var checkPassword = (rule, value, callback) => {
            
            if (value !== this.registerUser.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        }
        return {
            registerUser:{
                name:'',
                email:'',
                password:'',
                checkPass:'',
                identity:'普通用户',
                // identity:'管理员',
            },
            rules:{
                name:[
                    {required:true,message:"用户名不能为空！",trigger:"blur"},
                    {min:2,max:10,message:"长度在2~10范围内！",trigger:"blur"}
                ],
                email:[
                    {required:true,message:"邮箱不能为空！",trigger:"blur"},
                    {type:"email",message:"邮箱格式不正确！",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空！",trigger:"blur"},
                    {min:6,max:16,message:"长度在6~10范围内！",trigger:"blur"}
                ],
                checkPass:[
                    {validator:checkPassword,trigger:"blur"}
                ]
            },
        }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post('/api/users/register',this.registerUser)
            .then(res=>{
                //注册成功
                this.$message({
                    message:'账号注册成功！',
                    type:'success',
                });
                this.$router.push('/login');
            });
            
          } 
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .register{
        position:relative;
        width:100%;
        height:100%;
        background:url(../assets/bg2.jpg) no-repeat center center;
        background-size:100% 100%;
    }
    .form_container{
        width:370px;
        height:210px;
        position: absolute;
        top:10%;
        left:50%;
        margin-left:-185px;
        padding:25px;
        border-radius:5px;
        text-align: center;
    }
    .form_container .manage_tip .title{
        font-size: 26px;
        font-weight:bold;
        color:#000;
    }
    .registerForm{
        margin-top:20px;
        background-color:#fff;
        padding: 20px 40px 20px 10px;
        border-radius: 5px;
        box-shadow: 0px 5px 10px #ccc;
    }
</style>
